<template>
	<view>
		<tt-bar leftIcon="icon-back" title="确认订单"></tt-bar>
		<view class="lissBox"  data-url="memberList" data-select="1"  @tap="toPage" >
			<view class="listRow studentBox">
				<image src="../../static/renyuan.png"></image>
				<text class="studentName">{{defaultMember[0].name}}</text>
				<text class="tel">{{defaultMember[0].phone}}</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{'height':scHeight+'px'}">
			<view class="carList">
				<block v-for="(item,index) in confirmList" :key="index">
					<view class="shopRow">
						<view class="titleBox">
							<text class="iconfont icon-shoucangdianjia"></text>
							<text class="shopName">{{item.store?item.store.name:item.storeName}}</text>
						</view>
						<confirmGood :goodInfo="item" :coupon="couponSelect" :cpList="couponList"></confirmGood>
					</view>
				</block>
			</view>
		</scroll-view>
		<view class="btmOp">
			<view class="payTypeBox" v-if="!isZero">
				<view class="yyBox" @tap="seletType" data-type="0">
					<text class="iconfont" :class="[payType==0?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					<text class="typeText">预约金支付:</text>
					<text class="price">￥{{pricePre}}</text>
				</view>
				<view class="yyBox" @tap="seletType" data-type="1">
					<text class="iconfont" :class="[payType==1?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					<text class="typeText">全款支付:</text>
					<text class="price">￥{{priceAll}}</text>
				</view>
			</view>
			<view class="btnBox">
				<text>{{payType==0?'预约金合计':'全款合计'}}：</text>
				<text class="pirceAll">￥{{payType==0?pricePre:priceAll}}</text>
				<button @tap="postOrder">确认订单</button>
			</view>
		</view>
		<selectCoupon ref="sctCoupon" :couponList="couponList" :choseCoupon="couponSelect"></selectCoupon>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import confirmGood from "@/components/confirmGood/confirmGood.vue";
	import selectCoupon from "@/components/selectCoupon/selectCoupon.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components: {
			ttBar,confirmGood,selectCoupon
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				parentId: state => state.user.parentId,
			})
		},
		data() {
			return {
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(426),
				goodInfo:null,
				payType:0,
				priceAll:0,
				pricePre:0,
				memberInfo:null,
				confirmList:null,
				memberIndex:0,
				defaultMember:[{
					name:'学员名',
					phone:'18712345678'
				}],
				acId:0,
				isGroup:0,
				isZero:false,
				zid:0,
				couponList:[],		//可用优惠券列表
				couponSelect:null		//已选中的优惠券
			};
		},
		watch:{
			couponSelect(newVal){
				this.getPrepay();
				this.getPrice();
			}
		},
		methods:{
			seletType(e){
				if(this.confirmList[0].price<0.05){
					uni.showToast({
						title: '本次交易仅支持全款支付',
						icon: 'none'
					});
				}else{
					e=parseInt(e.currentTarget.dataset.type);
					if(this.isGroup!=0 && e==0){
						uni.showToast({
							title: '本次交易仅支持全款支付',
							icon: 'none'
						});
					}else if(this.confirmList[0].courseType=='1'){
						uni.showToast({
							title: '本次交易仅支持全款支付',
							icon: 'none'
						});
					}else{
						this.payType=e;
					}
				}
				
				
			},
			toggleCoupon(){
				this.$refs.sctCoupon.toggle();
			},
			getMember(){
				this.$store.dispatch("apiGetMemberList",{
					"userId":this.userInfo.userId,
					"page_no":1,
					"page_size":10
				}).then(res=>{
					this.memberInfo=res.data.data.items
					this.defaultMember=res.data.data.items.filter(x=>{
						return x.used==1
					})
					if(this.defaultMember.length<1){
						this.defaultMember=[res.data.data.items[0]]
					}
				})
			},
			getCoupon(){
				this.$store.dispatch("apiGetCanUserCoupon",{
					price:this.confirmList[0].price,
					userId:this.userInfo.userId,
					courseId:this.confirmList[0].id
				}).then(res=>{
					if(res.data.data.items.length>0){
						
						this.couponList=res.data.data.items;
						this.couponSelect=res.data.data.items.reduce(function(pre,curv){
							return pre.coupon.discount < curv.coupon.discount ? curv : pre;
						})
					}
				})
			},
			postOrder(){
				uni.showLoading({
					title: '正在提交订单',
					mask: false
				});
				let _postData={
					userId:this.userInfo.userId,
					memberId:this.memberInfo[this.memberIndex].id,
					courseId:this.confirmList[0].id,
					payAll:this.payType
				}
				if(this.parentId!=0){
					_postData.parentId=this.parentId
				}
				if(this.isGroup==1){
					
					this.$store.dispatch("apiOpenGroup", {
						userId: this.userInfo.userId,
						activeId:this.acId
					}).then(res => {
						_postData.groupId=res.data.data.id;
						this.$store.dispatch("apiPostOrder",_postData).then(OrderRes=>{
							uni.hideLoading();
							let _idStr=OrderRes.data.data.join(",");
							uni.redirectTo({
								url:'/pages/pay/pay?id='+_idStr
							})
						})
					})
				}else if(this.isGroup==2){
					_postData.groupId=this.acId;
					this.$store.dispatch("apiPostOrder",_postData).then(OrderRes=>{
						uni.hideLoading();
						let _idStr=OrderRes.data.data.join(",");
						uni.redirectTo({
							url:'/pages/pay/pay?id='+_idStr
						})
					})
				}else if(this.isZero){
					_postData.zeroId=this.zid;
					this.$store.dispatch("apiPostZeroOrder",_postData).then(OrderRes=>{
						uni.hideLoading();
						console.log(OrderRes);
						let _oNo=OrderRes.data.data[0];
						console.log(_oNo);
						uni.redirectTo({
							url:'/pages/orderDt/orderDt?id='+_oNo
						})
					}).catch(err=>{
						uni.showToast({
							title: err.msg.toString(),
							icon: 'none'
						});
					})
				}else{
					if(this.couponSelect){
						let _arr=[];
						_arr.push(this.couponSelect.id);
						_postData.userCouponList=_arr;
					}
					this.$store.dispatch("apiPostOrder",_postData).then(OrderRes=>{
						uni.hideLoading();
						let _idStr=OrderRes.data.data.join(",");
						uni.redirectTo({
							url:'/pages/pay/pay?id='+_idStr
						})
					})
				}
				
				
			},
			// 计算总预约金
			getPrepay(){
				let n=0
				this.confirmList.forEach((x)=>{
					n=n+x.prepay
				})
				this.pricePre=n.toFixed(2);
			},
			// 计算总价
			getPrice(){
				let n=0
				this.confirmList.forEach((x)=>{
					n=n+x.price
				})
				if(this.couponSelect){
					this.priceAll=(n-this.couponSelect.coupon.discount).toFixed(2);
				}else{
					this.priceAll=n.toFixed(2);
				}
			}
		},
		onLoad(cfm) {
			this.confirmList=uni.getStorageSync("confirmList");
			
			if(cfm.isGroup==1 || cfm.isGroup==2){
				this.isGroup=cfm.isGroup;
				this.payType=1;
				this.acId=cfm.acId
				
			}
			if(cfm.isZero){
				this.payType=1;
				this.isZero=true;
				this.zid=cfm.zid
			}
			
			
			if(this.confirmList[0].price<0.05 || this.confirmList[0].courseType=='1'){
				this.payType=1
			}
			if(cfm.isGroup==1 ||  cfm.isGroup==2 || cfm.isZero){
				this.getPrepay();
				this.getPrice();
			}else{
				this.getCoupon();
				this.getPrepay();
				this.getPrice();
			}
			this.getMember();
			
			
			uni.$on("selectMember",payload=>{
				this.memberIndex=payload.index
				this.defaultMember=[this.memberInfo[payload.index]]
			})
			uni.$on("shureCoupon",payload=>{
				this.couponSelect=payload
			})
		
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getMember();
				this.getCoupon();
				this.getPrepay();
				this.getPrice();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less" >
	// @import "../../common/public.less";
	page {
		background-color: #f6f6f6;
	}

	.lissBox {
		display: flex;
		flex-direction: column;
		padding: 18upx;

		.listRow {
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			background-color: #FFFFFF;
			border-radius: 10upx;
		}

		.studentBox {
			display: flex;
			align-items: center;
			height: 120upx;
			padding: 0 40upx 0 40upx;
			font-size: 32upx;
			color: #202932;

			image {
				width: 48upx;
				height: 48upx;
				margin-right: 20upx;
			}

			.studentName {
				margin-right: 20upx;
				font-weight: bold;
			}

			.tel {
				flex-grow: 1;
				font-weight: bold;
			}

			.iconfont {
				color: #c9c9c9;
				font-size: 40upx;
				font-weight: normal;
			}

		}
	}
	.carList {
		padding: 10upx 18upx 0upx 18upx;
		display: flex;
		flex-direction: column;
	
		.shopRow {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 20upx;
			margin-bottom: 24upx;
	
			.titleBox {
				padding: 24upx 40upx;
				display: flex;
				align-items: center;
	
				.icon-shoucangdianjia {
					color: #202932;
					font-size: 40upx;
					margin-right: 10upx;
				}
	
	
				.shopSelect {
					font-size: 44upx;
					margin-right: 40upx;
					color: #c3c3c3;
				}
	
				.icon-yuanxingxuanzhongfill {
					color: #ffcd11;
				}
	
				.shopName {
					font-size: 32rpx;
					font-weight: bold;
					color: #202932;
					flex: 1;
				}
	
				.icon-right {
					color: #9a9a9a;
					font-size: 32upx;
				}
			}
		}
	}
	
	.btmOp{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 180upx;
		// background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		.payTypeBox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 75upx;
			background-color: #f8e4a9;
			font-size: 28upx;
			padding: 0 36upx;
			.yyBox{
				display: flex;
				align-items: center;
			}
			.iconfont{
				font-size: 40upx;
				color: #ff8f2c;
				font-weight: normal;
				margin-right: 6upx;
			}
			.typeText{
				color: #a17f68;
				
			}
			.price{
				font-size: 28upx;
				color: #ff3b2b;
			}
		}
		.btnBox {
			height: 105upx;
			display: flex;
			align-items: center;
			padding: 0 36upx;
			background-color: #FFFFFF;
			button {
				margin: 0;
				margin-left: 20upx;
				height: 80upx;
				line-height: 80upx;
				padding: 0 40upx;
				border-radius: 40upx;
				border: none;
				color: #FFFFFF;
				font-size: 32upx;
				font-weight: bold;
				background: linear-gradient(to right, #ff572a, #ff0d3f);
				
			}
		
			button:after {
				border: none;
				outline: none;
			}
		
			text {
				font-size: 28rpx;
				color: #202932;
			}
		
			.pirceAll {
				font-size: 42rpx;
				font-weight: bold;
				color: #ff3b2b;
				flex-grow: 1;
			}
		}
	}
</style>
